<template>
	<view class="scen-warp" v-if="scenInfo.scenname">
		<view class="scen-box" @click="jumpScenDetail">
			<view class="img-box">
				<image class="jbimg" :src="scenInfo.scenimg" ></image>
				<view class="rank" v-if='rank'>{{rank}}</view>
			</view>
			<view class="info-box">
				<view class="main-hd">
					<text class="title">{{ scenInfo.scenname }}</text>
					<view class='cu-tag round sm'>{{ scenInfo.scennum }}人本</view>
				</view>
				<view class="sub-hd">
					<star-group :score="scenInfo.scenscore"></star-group>
					
					<view class="tag-group text-cut" v-if="tags.length">
						<block v-for="(tag, index) of tags" :key="index">
							<view class='cu-tag line-gray round sm'>{{tag}}</view>
						</block>
					</view>
					
				</view>
				
				<view class="intro text-cut">
					{{scenInfo.scencontext}}
				</view>
			</view>
		</view>
	
	</view>
</template>


<script>

import starGroup from '@/components/basics/star-group.vue';

export default {
	name: 'ViewScen',
	components: {
		starGroup
	},
	computed:{
		tags() {
			let scenstyle = this.scenInfo.scenstyle
			if (!scenstyle) return []
			return scenstyle.split(' ')
		}
	},
	props: {
		scenInfo: {
			type: Object,
			default: () => {
				return {}
			}
		},
		rank: {
			type: Number,
			default: () => {
				return 0
			}
		},
	},
	methods: {
		jumpScenDetail() {
			if(!this.scenInfo.scenid) return
			this.$jumpPages('scenario', {
				scenid: this.scenInfo.scenid
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.scen-warp{
	padding: 50rpx 30rpx;
}
.scen-box{
	position: relative;
	&::after{
		content: " ";
		position: absolute;
		left: 170rpx;
		right: 0;
		bottom: -50rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	.img-box{
		position: absolute;
		overflow: hidden;
		border-radius: 16rpx; 
		width: 140rpx;
		height: 193rpx;
		left: 0;
		top: 0;
		.jbimg{
			width: 140rpx;
			height: 193rpx;
			border-radius: 16rpx; 
		}
		.rank{
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			background: #ED581D;
			background-image: linear-gradient(top, #EDC1B0, #ED581D);
			color: #FFFFFF;
			border-radius: 16rpx 0 16rpx 0; 
			height: 30rpx;
			line-height: 30rpx;
			font-size: 20rpx;
			min-width: 50rpx;
			text-align: center;
			padding: 0 10rpx;
		}
	}
	.info-box{
		min-height: 193rpx;;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
		margin-left: 140rpx;
		padding-left: 15px;
		font-size: 14px;
		line-height: 1;
		
	}
	.main-hd{
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
		font-size: 36rpx;
		color: #000000;
		.title{
			font-size: 32rpx;
			font-weight: 400;
		}
		.cu-tag{
			color: #FE6B42;
			font-size: 18rpx;
			color: #FFFFFF;
			background-color: #2EB9C3;
			margin-left: 10rpx;
		}
	}
	.sub-hd{
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
		font-size: 28rpx;
		color: #666666;
		.tag-group{
			margin-left: 10rpx;
		}
	}

	.intro{
		color: #909090;
		font-size: 22rpx;
		line-height: 1.4;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical
	}

}

</style>
